<include file="common:header" />
	<style>
		.m{ width: 100%;position:relative;}
		.m video{width:100%;height:100%}
		#player{left:0;top:42%;position:absolute;text-align:center;}
	</style>
	
	<div class="m">
		<video id="my-video" class="video-js" name="video"  preload="auto"
		   data-setup="{}" playsinline  webkit-playsinline="true" x-webkit-airplay="true" -webkit-playsinline>
			<source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4">
			
		  </video>
		  <!-- <button id="player" class="pause">播放</button> -->
		  <img id="player" class="pause" src="__PRIVATE__/images/video_start.png" check="0"/>
		  <!-- <div>【系统检测到您尚未付款，该视频仅能播放2秒】</div> -->
		  <div class="weui-btn-area">
			    <a href="javascript:;" class="weui-btn weui-btn_primary register">微信付款即可下载完整视频</a>
		  </div>
		  <script type="text/javascript">
		  $.toast.prototype.defaults.duration = 3000;
		  var  Media = document.getElementById("my-video"); 
			    function show_error(){
			    	$.toast("试看结束", "forbidden");
			    }
			    /*end toast*/
		  
		  getvideoprogress();

		  function getvideoprogress() {
		         setTimeout(function () {
		             var currentTime=Media.currentTime.toFixed(1);
		             if(currentTime>=2){
		            	 Media.currentTime = 0;
		            	 Media.pause();
		            	 /* $('#player').attr('check','1'); */
				    	   $('video').click();
				    	   show_error();
		             }
		            /*  console.log(currentTime); */
		             getvideoprogress();
		         }, 50);
		     }
		  
		  $('#player').click(function(){
			  $('video').click();
		  });
		  $('video').click(function() {
			  if ($('#player').hasClass('pause') && $('#player').attr('check')==0) {
			  $("video").trigger("play");
			  $('#player').removeClass('pause');
			  $('#player').addClass('play');
			  $('#player').css('display','none');
			  /* start(); */
			  /* $('#player').attr('src','__PRIVATE__/images/video_stop.png'); */
			  } 
			  else if($('#player').hasClass('pause') && $('#player').attr('check')==1){
				  show_error();
				  /* layer.open({
	  					style:'font-size:1.6rem;',
	  					content:"试看结束",
	  					time:2,
	  				}); */
			  }
			  else if($('#player').hasClass('play') && $('#player').attr('check')==1){
				  show_error();
				  /* layer.open({
	  					style:'font-size:1.6rem;',
	  					content:"试看结束",
	  					time:2,
	  				}); */
				  $("video").trigger("pause");
				  $('#player').removeClass('play');
				  $('#player').addClass('pause');
				  $('#player').css('display','block');
				  $('#player').attr('src','__PRIVATE__/images/video_start.png');
				  /* stop(); */
			  }
			  else {
			  $("video").trigger("pause");
			  $('#player').removeClass('play');
			  $('#player').addClass('pause');
			  $('#player').css('display','block');
			  $('#player').attr('src','__PRIVATE__/images/video_start.png');
			  /* stop(); */
			  }
		  });
		  var md=document.getElementsByTagName("video")[0];
		    md.addEventListener("ended",function(){
		    	layer.open({
  					style:'font-size:1.6rem;',
  					content:"播放结束",
  					time:2,
  					end:function(){
  						$('video').click();
  					}
  				});
		    });
		    
		    
		    
		  </script>
	</div>

</body>
</html>
